import React, { Component } from 'react';
import {Card,Button,Table,Modal,message} from "antd"
import {formdateDate} from "../../util/datautil"
import Userform from './userform';
import {reqUsers,reqAddOrUpdataUser, reqDeleteUser} from "../../api/index"
class User extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            users:[],//用户列表
            roles:[],//角色列表
            isShow:false,//控制弹框
         }
    }
    initColumns=()=>{
        this.columns=[
            {
                title:"用户名",
                dataIndex:"username"
            },
            {
                title:"邮箱",
                dataIndex:"email"
            },
            {
                title:"电话",
                dataIndex:"phone"
            },
            {
                title:"注册时间",
                dataIndex:"create_time",
                render:formdateDate,
            },
            {
                title:"所属角色",
                dataIndex:"role_id",
                render:(role_id)=>this.roleNames[role_id],
            },
            {
                title:"操作",
               render:(user)=>{
                   return(
                   <span>
                       <span onClick={()=>this.updateUser(user)}>修改</span>
                       <span onClick={()=>this.deleteUser(user)}>删除</span>
                   </span>
                   )
               }
            
            }
        ]
    }
    // 获取用户列表
    getUsers=async()=>{
        const result=await reqUsers()
        console.log(result);
        if(result.status===0){
            const {users,roles}=result.data
            this.initRoleNames(roles)
               this.setState({
                   users,
                   roles,
               })
        }
    }
    // 弹出修改弹框
    updateUser=(user)=>{
     this.user=user
     this.setState({
         isShow:true
     })
    }
    // 显示添加弹框
    showAdd=()=>{
        this.user=null;//添加弹框时清除user
        this.setState({isShow:true})
    }
    // 删除用户
    deleteUser=(user)=>{
        Modal.confirm({
            title: `确定删除${user.username}吗`,
            onOk:async()=>{
                const result=await reqDeleteUser(user._id)
                if(result.status===0){
                    message.success("删除用户成功")
                    this.getUsers()
                }
            }
          });
        }

    
    // 添加或者修改用户
    addOrUpdatauser=async()=>{
        this.setState({isShow:false})
        const user=this.form.getFieldsValue() //获取表单数据
        this.form.resetFields()//清空表单数据
        if(this.user){
            user._id=this.user._id
        }
        const result=await reqAddOrUpdataUser(user)
        if(result.status===0){
            message.success(`${this.user?"修改":"添加"}用户成功`)
            this.getUsers()
        }
    }
    initRoleNames=(roles)=>{
        const roleNames=roles.reduce((pre,role)=>{
            pre[role._id]=role.name;
            return pre
        },{})
        // console.log(111,roleNames);
        this.roleNames=roleNames
    }
    componentWillMount(){
        this.initColumns()
    }
    componentDidMount(){
        this.getUsers()
    }
    render() { 
        const {users,isShow,roles}=this.state
        const user=this.user ||{}
        const title=<Button type="primary" onClick={this.showAdd}>创建用户</Button>
        return ( <Card title={title}>
            <Table rowKey="_id" columns={this.columns} dataSource={users} />
            <Modal title={user._id?"修改":"添加"} 
            visible={isShow} 
            onOk={this.addOrUpdatauser}
            onCancel={()=>{this.setState({isShow:false})}}
            >
              <Userform user={user} roles={roles} setForm={(form)=>{this.form=form}} />
            </Modal>
           
        </Card> );
    }
}
 
export default User;